<template>
   
   <div id="traf" style="width: 1500px; height: 400px; display: flex;"></div>
</template>

<script>
import * as echarts from 'echarts';
export default{
    mounted() {
        

var chartDom = document.getElementById('traf');
var myChart = echarts.init(chartDom);
var option;

const spirit =
  'image://';
var maxData = 2000;
option = {
  tooltip: {},
  title: {
    text: '高峰期人流量',
    left: 'center',
    top: 25,
    textStyle: {
        fontSize: 30,
        color:'#415058'
    }
},
  xAxis: {
    max: maxData,
    splitLine: { show: false },
    offset: 10,
    axisLine: {
      lineStyle: {
        color: '#791C00'
      }
    },
    axisLabel: {
      margin: 10
    }
  },
  yAxis: {
    data: ['流水门', '飞翔门', '凯旋门', '流水食堂','行云食堂'],
    inverse: true,
    axisTick: { show: false },
    axisLine: { show: false },
    axisLabel: {
      margin: 10,
      color: '#791C00',
      fontSize: 16
    }
  },
  grid: {
    top: 'center',
    height: 200,
    left: 70,
    right: 100
  },
  series: [
    {
      // current data
      type: 'pictorialBar',
      symbol: spirit,
      symbolRepeat: 'fixed',
      symbolMargin: '5%',
      symbolClip: true,
      symbolSize: 30,
      symbolBoundingData: maxData,
      data: [891, 1220, 660, 1670,1508],
      markLine: {
        symbol: 'none',
        label: {
          formatter: 'max: {c}',
          position: 'start'
        },
        lineStyle: {
          color: 'green',
          type: 'dotted',
          opacity: 0.2,
          width: 2
        },
        data: [
          {
            type: 'max'
          }
        ]
      },
      z: 10
    },
    {
      // full data
      type: 'pictorialBar',
      itemStyle: {
        opacity: 0.2
      },
      label: {
        show: true,
        formatter: function (params) {
          return ((params.value / maxData) * 100).toFixed(1) + ' %';
        },
        position: 'right',
        offset: [10, 0],
        color: 'green',
        fontSize: 18
      },
      animationDuration: 0,
      symbolRepeat: 'fixed',
      symbolMargin: '5%',
      symbol: spirit,
      symbolSize: 30,
      symbolBoundingData: maxData,
      data: [891, 1220, 660, 1670,1508],
      z: 5
    }
  ]
};
// Make dynamic data.
function random() {
  return +(Math.random() * (maxData - 10)).toFixed(1);
}
setInterval(function () {
  const dynamicData = [random(), random(), random(), random(),random()];
  myChart.setOption({
    series: [
      {
        data: dynamicData.slice()
      },
      {
        data: dynamicData.slice()
      }
    ]
  });
}, 3000);

option && myChart.setOption(option);

    },
}
</script>